<template>
    <div class="page-list">
        <span class="title">分网管理</span>
        <div class="container">
            <el-button v-show="$route.query.type == 0" style="margin: 20px;" @click="chooseAddress">选择地域</el-button>
            <span v-if="$route.query.type == 0" style="line-height: 40px;padding-left: 30px;">{{addressdata}}</span>
            <span v-else style="line-height: 40px;padding-left: 30px;">xxx地域</span>
            <el-table
            ref="multipleTable"
            :data="tableData3"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="100">
                </el-table-column>
                <el-table-column
                prop="name"
                label="权限名称">
                </el-table-column>
            </el-table>
            <div class="card" v-show="cardShow">
                <ul>
                    <span>选择省份</span>
                    <li v-for="(item, index) in add1" :key="index" @click="add1C(item)" :class="{active: item.show}">
                        {{item.name}}
                    </li>
                </ul>
                <ul>
                    <span>选择地方</span>
                    <li v-for="(item, index) in add2" :key="index" @click="add2C(item)" :class="{active: item.show}" >
                        {{item.name}}
                    </li>
                </ul>
                <ul>
                    <span>选择县</span>
                    <li v-for="(item, index) in add3" :key="index" @click="add3C(item)" :class="{active: item.show}" >
                        {{item.name}}
                    </li>
                </ul>
                <ul>
                    <span>选择乡</span>
                    <li v-for="(item, index) in add4" :key="index" @click="add4C(item)" :class="{active: item.show}" v-if="kai">
                        {{item.name}}
                    </li>
                </ul>
                <el-button @click="sureAddress">确认选择</el-button>
            </div>
            <el-button style="margin: 30px;" v-show="$route.query.type == 0">确认权限选择</el-button>
            <el-button style="margin: 30px;" v-show="$route.query.type == 1">确认修改</el-button>
            <div class="bg"></div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            cardShow: false,
            multipleSelection: [],
            value: '',
            addressdata: '',
            prtid: '0',
            add1: [],
            add2: [],
            add3: [],
            add4: [],
            aV1: '',
            aV2: '',
            aV3: '',
            aV4: '',
            selectedOptions: '',
            tableData3: [
                {
                    name: '纪念馆管理'
                },
                {
                    name: '祭祀财务统计'
                },
                {
                    name: '推广财务统计'
                },
                {
                    name: '劳务提现管理'
                },
                {
                    name: '礼金管理'
                },
                {
                    name: '分网管理'
                },
                {
                    name: '帮助中心'
                }
            ],
            kai: true
        }
    },
    created () {
        this.address()
    },
    methods: {
        add1C (item) {
            this.aV1 = item.name
            let that = this
            that.add2 = []
            this.add1.forEach((item) => {
                item.show = false
            })
            this.add1.forEach((items) => {
                if (items.id == item.id) {
                    item.show = true
                }
            })
            this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+item.id+"")
				.then(function(res){
					// let data = JSON.parse(res.data).data
                    that.add2 = JSON.parse(res.data).data
				})
            
            
        },
        add2C (item) {
            this.aV2 = item.name
            let that = this
            that.add3 = []
            this.add2.forEach((item) => {
                item.show = false
            })
            this.add2.forEach((items) => {
                if (items.id == item.id) {
                    item.show = true
                }
            })
            this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+item.id+"")
				.then(function(res){
					// let data = JSON.parse(res.data).data
                    that.add3 = JSON.parse(res.data).data
				})
        },
        add3C (item) {
            this.aV3 = item.name
            let that = this
            that.add4 = []
            this.add3.forEach((item) => {
                item.show = false
            })
            this.add3.forEach((items) => {
                if (items.id == item.id) {
                    item.show = true
                }
            })
            this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+item.id+"")
				.then(function(res){
					// let data = JSON.parse(res.data).data
                    that.add4 = JSON.parse(res.data).data
                    that.add4.forEach((item) => {
                        item.show = false
                    })
				})
        },
        add4C (item) {
            // let that = this
            this.aV4 = item.name
            this.add4.forEach((item) => {
                item.show = false
            })
            this.add4.forEach((items) => {
                if (items.id == item.id) {
                    item.show = true
                    this.kai = false
                    this.kai = true
                }
            })
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        chooseAddress () {
            this.cardShow = true
        },
        address () {
            let that = this
            let prtid = 0
            this.$axios.get("/huainianwang/wechatArea/app/getAreaById.htm?prtid="+prtid+"")
				.then(function(res){
					// let data = JSON.parse(res.data).data
                    that.add1 = JSON.parse(res.data).data
                    // console.log(that.add1)
                   
				})
        },
        sureAddress () {
            this.cardShow = false
            this.addressdata = this.aV1 + '-' + this.aV2 + '-' + this.aV3 + '-' + this.aV4
        }
    }
}
</script>

<style lang="scss" scoped>
.page-list{
    height: 100%;
    width: 100%;
}
.card {
    width: 600px;
    height: 450px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -200px;
    border-radius: 8px;
    z-index: 10;
    background: rgba(0,0,0,.7);
    display: flex;
    .el-button {
        position: absolute;
        bottom: 20px;
        right: 50px;
    }
    ul {
        width: 150px;
        height: 350px;
        margin: 0;
        margin-top: 25px;
        overflow: auto;
        display: inline-block;
        color: #fff;
        font-weight: 500;
        li{
            height: 30px;
            width: 100%;
            color: #fff;
            line-height: 30px;
            font-size: 14px;
            // padding: 0 30px;
            display: inline-block;
            cursor: pointer;
        }
    }
}
li {
    list-style: none;
    color: #fff;
}
.active{
    color: #6cb8f5 !important;
}
</style>
